@import "mixins";

.rct-pagination-wrap {
  .rct-pagination {
    list-style-type: none;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0 0 0 1px;

    li {
      display: inline-block;
      a, & > span {
        position: relative;
        cursor: pointer;
        display: inline-block;
        background-color: #fff;
        border: solid 1px #ddd;
        //border-right-width: 0;
        margin-left: -1px;
        box-sizing: border-box;
        text-align: center;
        padding: 7px;
        line-height: 14px;
        min-width: 30px;
      }

      span {
        cursor: default;
      }
    }

    li:first-child a {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    li:last-child a {
      border-right-width: 1px;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    .previous, .next {
      a span {
        height: 12px;
        display: inline-block;
        position: relative;
      }
    }

    .previous a span {
      .arrow-left(6px, #333, #fff, true);
    }

    .next a span {
      .arrow-right(6px, #333, #fff, true);
    }

    .active a {
      background-color: @primary;
      border-color: @primary;
      color: #fff;
    }
  }

  form {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    input {
      width: 50px;
      border-radius: 0;
      margin: 0;
      border-right-width: 0;
      border-color: #ddd;
    }

    :first-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    :last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border-right-width: 1px;
    }
  }

  &.rct-pagination-mini {
    li:first-child a {
      border-radius: 4px;
    }

    li:last-child a {
      margin-left: 10px;
      border-radius: 4px;
    }
  }
}
